<template>
  <div class="container">
	  <div class="content">
			<div class='content-title'>内容</div>
				<div class='content-parent'>
					<textarea class="content-txt" v-model="content"  maxlength="300" placeholder="请输入消息推送内容，字数不超过300" placeholder-style="font-size:28upx;color:#999999;"></textarea>
					<text class="content-length">{{inputLength}}/300</text>
			</div>
	  </div>
	  <div class="msg">
	      <div class="msg-title">消息对象</div>
		  <div class="msg-input" @click='chosePerson'>
			  <div v-if='noMsgObj' class="chose">请选择</div>
			  <div v-else class="chose">
				  <span v-for="(item,index) in selectedItems" :key='index'>{{item.name}},</span>
			  </div>
			  <image class="more" src="../../static/img/more.png"></image>
		  </div>
	  </div>
      <div class="btn">
          <div class="btn-text" @click='send'>发送</div>
      </div>
  </div>
</template>

<script>
	import {mapGetters} from 'vuex';
	import {isEmpty} from '@/utils/index';
    import msgService from "@/services/msg";
    const service = new msgService();
    export default {
        data(){
            return{
				id:'',
				content:'',
				orgLevel:'',
				orgLayer:'',
                datas:[	
                {
                    title:"内容",
                    default:"请输入消息推送内容，字数不超过300"
                }],
				selectedItems:[]
            }
        },
		computed:{
			noMsgObj(){
				return isEmpty(this.selectedItems);
			},
			inputLength(){
				return this.content.length;
			}
		},
        onLoad({id}){
			this.id = id;
			if(!isEmpty(id)){
				this.content = this.getMsgContent();
			};
			uni.$on('msgObj',(payload)=>{
				console.log(payload);
				this.selectedItems = payload.selectedItems;
				this.orgLevel = payload.orgLevel;
				this.orgLayer = payload.orgLayer;
			});
        },
		onUnload() {
			uni.$off('msgObj');
		},
        methods:{
			...mapGetters({
				getMsgContent: 'msgStore/getMsgContent',
			}),
			//选择消息对象
			chosePerson(){
				uni.navigateTo({
					url:'/pages/message/msgObj'
				})
			},
			send(){
				if(isEmpty(this.content)){
					uni.showToast({
						title:'请输入内容',
						duration:2000,
						icon:'none'
					});
					return;
				}
				if(isEmpty(this.selectedItems)){
					uni.showToast({
						title:'请选择消息对象',
						duration:2000,
						icon:'none'
					});
					return;
				}
				uni.showLoading();
				let sendIds = [];
				this.selectedItems.forEach((item,index)=>{
					sendIds.push(item.id);
				});
				const param = {
					content:this.content,
					orgLevel:this.orgLevel,
					orgLayer:this.orgLayer,
					sendObject:sendIds
				};
				let methodName = 'addWebsiteMail';
				if(!isEmpty(this.id)){
					param.id = this.id;
					methodName = 'updateWebsiteMail';
				}
				uni.hideLoading();
				//service.addWebsiteMail(param)
				service[methodName](param).then(response=>{
					if(response.success){
						uni.$emit('create');
						uni.navigateBack();
					}else{
						uni.showToast({
							title:response.message,
							duration:2000,
							icon:'none'
						})
					}
				});
			}
        }
    }

</script>

<style lang="scss">
	.content{
		// display: flex;
		margin:30upx 20upx;
		padding:20upx 0;
		&-parent{
			position: relative;
		}
		
		&-title{
			padding-right: 20upx;
			font-size:28upx;
			color:#333;
			line-height:50upx;
		}
		&-txt{
			// flex: 1;
			margin-top: 20upx;
			font-size:28upx;
			height: 200upx;
			color: #999999;
			border-radius: 10px;
			border: 2upx solid #f1f1f1;
			padding: 20upx 10px;
			width: 100%;
		}
		&-length{
			position: absolute;
			right: 8upx;
			bottom: 4upx;
			font-size: 24upx;
			color: #d81e06;
		}
	}
    .msg{
        margin:30upx 20upx;
        padding:20upx 0;
        display:flex;
        border-bottom:1upx solid #f1f1f1;
        &-title{
            width:22%;
            font-size:28upx;
            color:#333;
            line-height:50upx;

        }
        &-input{
           width:78%;
           font-size:28upx;
		   color: #999999;
		   display: flex;
        }
    }
	.chose{
		flex: 1;
		line-height: 50upx;
		overflow: hidden;
		text-overflow: ellipsis;
		-webkit-line-clamp: 1;
		display: -webkit-box;
		-webkit-box-orient: vertical;
	}
	.more{
		width: 36upx;
		height: 36upx;
	}
    .btn{
        margin-top:60upx;
        width:100%;
        text-align:center;
        &-text{
            display:inline-block;
            width:80%;
            height:85upx;
            line-height:85upx;
            border-radius:10upx;
            font-size:30upx;
            color:#fff;
            background:#4a96f2;
        }
    }

</style>